// 鼠标进入改变字体颜色
$(".top-ul").find("li").hover(function(){
    $(this).children().css("color","#4bcdc1").next("ul").css("display","block")
},function(){
    $(this).children().css("color","#000").next("ul").css("display","none")
});

// 判断是否登录
let userObj = sessionStorage.getItem("token") ? JSON.parse(sessionStorage.getItem("token")) : {};

    if(userObj.isLogin === "ok"){
        $(".loginMsg").hide();
        $(".userMsg").show();
        $(".userMsg").children("span").html(userObj.username);
    }

    $(".userMsg").children("a").click(function(){
        sessionStorage.setItem("token","");
        $(".loginMsg").show();
        $(".userMsg").hide();
    })


// $(".top-ul").children("li").hover(function(){
//     // console.log(this);
//     $(this).children("ul").css("display","block")
// })
    // ;(function(){

        // logo 端口搜索
        // console.log($(".logo-txt"))
    $(".logo-txt").on("input",function(){
        // console.log($(this).val())
        if($(this).val() === ""){
            $(".logo-right>ul").empty();
            return;
        }
        $.ajax({
            url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
            dataType:"jsonp",
            jsonp:"cb",
            data:{
                wd:$(this).val()
            },
            success:(res)=>{
                console.log(res.s);
                // res.s
                let str = "";
                for(let i=0;i<res.s.length;i++){
                    str += `<li>${res.s[i]}</li>`
                }
                // console.log(str)
                $(".logo-right>ul").html(str);
            }
        })
    })

    // 点击跳转
    // $(".logo-right>span").click(function(){
    //     location.href = "https://www.baidu.com/s?wd="+ $(".logo-txt").val()
    // })
    // });

    // nav 事件
    $(".nav-first").children("li").hover(function () {
        $(this).children("a").css("color","#4bcdc1").parent().css("background","#ffff").children(".navIn").css("display","block")
        
    },function () {
        $(this).children("a").css("color","#fff").parent().css("background","#4bcdc1").children(".navIn").css("display","none")
        
    })



    // 放大镜
   

    // console.log($(".detailTR-a").children("span"))
    $(".detailTR-a").children("span").on("click",function(){
        console.log($(this).next().val())
    })


    // Appale 的数据
$.ajax({
    url:"data/data.json",
    success:(res)=>{
        // console.log(res);
        var data=JSON.parse(res);
        // console.log(data);
        var id=window.location.search.split("=")[1]
        // console.log(window.location.search.split("=")[1])
    //    console.log(id)
        let i;
        var s=data.some(function(val,index){
            i=index;
            // console.log(val.type)
            return val.goodsId===id;
        })
        if(s){
            // data=data[i].Apple;
            // console.log(data);
            if (data && data.length > 0) {
            var str="";
            
                // console.log(i)
                // console.log(data);
                str+=`<div class="detailTL fl">
                <img src="${data[i].img[0].small}" alt="">
                <span></span>
            </div>
            <div class="detailBig">
                <img src="${data[i].img[0].large}" alt="">
            </div>

            <div class="detailTR fr">
                <h2>${data[i].name}</h2>
                <p>${data[i].proce}</p>
                <div class="detailTR-a">数量:<span>-</span><input type="text" value="1"><em>+</em></div>
                <div class="detailTR-b">库存:${data[i].stock}</div>
                <div class="detailTR-c">
                    <a href="shpping.html"><span data-id="${data[i].goodsId}" class="addCart">立即购买</span></a>
                    <span class="addCart" data-id="${data[i].goodsId}">加入购物车</span>
                </div>`
                // console.log(str)
            };
            $(".detailTop").html(str);
            
        }
        // 调用放大镜函数
        new Fn();
        // 添加购物车
        new Shopping();
    }
})

// 购物车   点击添加购物车事件
class Shopping{
    constructor(){
        this.cont=document.querySelector(".detailTR");
        // console.log(this.cont)
        this.addEvent();
    }
    addEvent(){
        let that=this;
        this.cont.addEventListener("click",function(eve){
            let e=eve||window.event;
            let tar=e.target||e.srcElement;
            if(tar.className==="addCart"){
                that.id=tar.getAttribute("data-id");
                console.log(that.id);
                that.proat();
            }
        })
    }
    proat(){
        // 将商品信息，存储的指定位置
        // 1. 以什么数据形式存储
        // 如果一个商品存储一条信息，非常浪费空间
            // 所以对多个商品数据进行打包，打包成数组，因为商品自身已经是对象数据了
            // [商品对象,商品对象,商品对象]
        // 为了让商品的数据进一步的轻便化，只存储商品的关键信息：id，数量
            // [{id:"1231",num:3},{id:"12312",num:1}]
        // 2. 存储数据时不同的情况
        // 如果购物车为空，直接添加
        // 如果购物车不是为空
            // 判断本次商品是不是老商品
                // 是：增加数量
                // 不是：直接添加
        // 3. 为了判断购物车是否为空，先读取将来准备存储的cookie的名字
        this.proData=getCookie("proData")?JSON.parse(getCookie("proData")):[];
        if(this.proData.length<1){
            this.proData.push({
                id:this.id,
                num:1
            })
        }else{
            // 为了保存查询到的数据的索引
            let i=0;
            // 利用数组的方法some，查询数组中重复的数据
            let flag=this.proData.some((val,idx)=>{
                // 并保存数据的索引
                i=idx;
                // 判断并返回
                return val.id===this.id;
            })
            // 根据some的返回结果，判断是否找到老数据，完成对应操作
            if(flag){
                this.proData[i].num++;

            }else{
                this.proData.push({
                    id:this.id,
                    num:1
                })
            }
            
        }
        // console.log(this.proData)

        // 以上操作，仅仅是假设，并没有真正的错做到cookie中的数据
        // 为了让以上操作生效，需要将以上操作的数据，真实的存入到cookie中；
        // console.log(JSON.stringify(this.proData))
       setCookie("proData",JSON.stringify(this.proData));
    }
}
// 放大镜效果
class Fn {
    constructor() {
        // 获取元素

        this.small_box=document.querySelector(".detailTL");

        this.span=document.querySelector(".detailTL span");

        this.big_box=document.querySelector(".detailBig");

        this.bimg=document.querySelector(".detailBig img");

        // 绑定事件
        
        this.addEvent();
    }
    addEvent() {
        // 移入事件
        var that=this;
        this.small_box.onmouseover = function () {


            that.xianshi();
        }
        // 移出事件
        this.small_box.onmouseout = function () {

            that.yincang();
        }
        // 移动事件
        this.small_box.onmousemove = function (eve) {
            var e=eve||window.event;


            that.dengbi(e);
        }

    }
    xianshi = function () {
        // 遮罩层显示
        this.span.style.display="block";
        this.big_box.style.display="block";
        // 设置span的宽高
        this.span.style.width=(this.big_box.offsetWidth/this.bimg.offsetWidth)*this.small_box.offsetWidth+"px";
        this.span.style.height=(this.big_box.offsetHeight/this.bimg.offsetHeight)*this.small_box.offsetHeight+"px";
    }
    yincang = function () {
        // 遮罩层隐藏
        this.span.style.display="none";
        this.big_box.style.display="none";
    }
    dengbi= function (e) {
        // 等比移动
        // 距左边窗口距离-大盒子距左边的距离-移动盒子的宽度/2
        var l=e.clientX-this.small_box.offsetLeft-this.span.offsetWidth/2;
        // 距上边窗口的距离-大盒子距上边的距离-移动盒子的高度/2
        var t=e.clientY-this.small_box.offsetTop-this.span.offsetHeight/2
        
        // 设置边界
        // 边界限定
        // 左上边
        if(l<0){l=0;}
        if(t<0){t=0;}
        // 右下：
        // 下：大盒子高度-移动盒子高度
        if(t>this.small_box.offsetHeight-this.span.offsetHeight){
            t=this.small_box.offsetHeight-this.span.offsetHeight
        }
        // 右：大盒子宽度-移动盒子的宽度
        if(l>this.small_box.offsetWidth-this.span.offsetWidth){
            
            l=this.small_box.offsetWidth-this.span.offsetWidth
        }
        
        // span跟随鼠标移动--left
        this.span.style.left=l+"px";
        
        // span跟随鼠标移动--top
        this.span.style.top=t+"px";
        
        // 移动范围
        // 计算big_box的图片移动的比例
        var x=l/(this.small_box.offsetWidth-this.span.offsetWidth);
        var y=t/(this.small_box.offsetHeight-this.span.offsetHeight);
        // console.log(x,y)
        // 设置给右边图片的位置
        //     右边图片移动的距离=比例*(小盒子宽或高-图片的宽或高的距离)
        this.bimg.style.left=x*-Math.abs(this.bimg.offsetWidth-this.big_box.offsetWidth)+"px";

        this.bimg.style.top=y*-Math.abs(this.big_box.offsetHeight-this.bimg.offsetHeight)+"px"

        // console.log(this.bimg.style.left,this.bimg.style.left)


        // console.log(this.span.style.left,this.span.style.top)
    }
}



